<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<title>高级用户</title>
		<script type="text/javascript" src="../../js/jquery-1.7.1.min.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: #eeeeee;
			}
			.headbox{
				background: #ffffff;
				margin: 12px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 70px;
				padding: 0 10px;
			}
			.head{
				display: flex;
			}
			.headS{
				width: 50px;
				border-radius: 50%;
			}
			.usernamebox{
				padding-left: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 50px;
			}
			.username{
				font-family:"黑体";
			}
			.dlLv{
				font-size: 12px;
				color: #f9b82e;
				background: url(../../img/radioVB.png) left center no-repeat;
				background-size: contain;
				text-indent: 20px;
			}
			.yue{
				font-weight: bold;
			}
			.chongzhi{
				background: #ffffff;
				padding-bottom: 15px;
			}
			.yuecz{
				height: 60px;
				line-height: 60px;
				margin-left: 10px;
				border-bottom: 1px solid #eeeeee;
				margin-bottom: 15px;
			}
			.czbutton{
				width: 90%;
				height: 70px;
				border: 1px solid #ff3b43;
				border-radius: 10px;
				font-size: 18px;
				font-weight: bold;
				text-align: center;
				margin: 0 auto;
				color: #ff3b43;
				margin-bottom: 15px;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.czbutton .tips{
				font-size: 12px;
				font-weight: normal;
				color: #999999;
			}
			.czbutton .tips span{
				color: #ff3b43;
			}
			.czactive{
				background: #ff3b43 !important;
				color: #ffffff !important;
			}
			.czactive .tips{
				color: #ffffff !important;
			}
			.czactive .tips span{
				color: #ffffff !important;
			}
			.detail{
				font-size: 12px;
				color: #666666;
				text-align: center;
				margin-top: 30px;
			}
			.detail a{
				color: #ff3b43;
			}
		</style>
	</head>
	<body>
		<div class="headbox">
			<div class="head">
				<div><img class="headS" src="img/timg.jpg"/></div>
				<div class="usernamebox">
					<p class="username">岁月如歌</p>
					<p class="dlLv">金牌代理</p>
				</div>
			</div>
			<div class="yue">余额：￥<span>666.00</span></div>
		</div>
		<div class="chongzhi">
			<p class="yuecz">余额充值</p>
			<div>
				<div class="czbutton cz500">
					<p>500元</p>
					<p class="tips"></p>
				</div>
				<div class="czbutton cz2000">
					<p>2000元</p>
					<p class="tips"></p>
				</div>
				<div class="czbutton cz5000">
					<p>5000元</p>
					<p class="tips">免费升级为<span>钻石代理</span></p>
				</div>
				<div class="czbutton cz10000">
					<p>10000元</p>
					<p class="tips">免费升级为<span>至尊代理</span></p>
				</div>
			</div>
		</div>
		<div class="detail">
			<p>升级后可享受更高优惠</p>
			<p><a href="jiamubiao.html">查看详情</a></p>
		</div>	
		<script type="text/javascript">
			$(function(){
				$('.czbutton').on("touchstart",function(){
					$(this).parent().find(".czbutton").removeClass("czactive");
					$(this).addClass("czactive");
				})
				//$('.czbutton').on("touchend",function(){
				//	$(this).removeClass("czactive");
				//})

				
			})
		</script>
	</body>
</html>
